<template>
  <div class="all">
    
    <div class="card" v-for="item in data">
      <div class="card-header">
        <div class="user-info">
          <div class="avatar">
            <img src="@/assets/vue.svg" alt="">
          </div>
          <div class="user-desc">
            <p class="name"> {{ item.nickname }} </p>
            <p class="date">{{  item.create_time.slice(0,10) }}</p>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="title">
         {{ item.title }}
        </div>
        <div class="comtent">
          {{ item.review_val }}
        </div>
      </div>
      <div class="card-footer">
        <div class="footer-item like">
          <i class="iconfont icon-xiai"></i>
          <p>{{ item.like }}</p>
        </div>
        <div class="footer-item comment">
          <el-icon><Comment /></el-icon>
          <p>{{ item.comment }}</p>

        </div>
        <div class="footer-item watch">
          <i class="iconfont icon-yanjing"></i>
          <p>{{ item.wacth }}</p>

        </div>

      </div>
    
  
    </div>

    

  </div>
</template>

<script setup>
  import { ref, onMounted, toValue } from 'vue'
  import { getReview } from '@/api/index.js'
  import { useReviewStore } from '@/stores/reviewStore.js'
  
  const reviewStore = useReviewStore()
  const data = ref([])
  const getReviewData = async () =>{
    const res = await getReview()
    // console.log(res)
    data.value = res.data

    reviewStore.setReviews({
      reviews:data
    })

  }
  onMounted(async () => {
    await getReviewData()
  })

</script>

<style lang="less" scoped>
.all {
  padding: 1rem;

  .card {
    width: 343px;
    height: 256px;
    background: #FFFFFF rgba(0, 0, 0, 0.001);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 12px 12px 12px 12px;
    padding: 1rem;
    box-sizing: border-box;
    margin-bottom: 1rem;

    .user-info {
      background-color: #FFFFFF;
      border-radius: 8px;
      display: flex;
      align-items: center;
      padding: 0.5rem;

      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 16px;
        background: #f0f0f0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .user-desc {
        .name {
          width: 94px;
          height: 20px;
          font-family: Roboto, Roboto;
          font-weight: 500;
          font-size: 14px;
          color: #000000;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .date {
          width: 100%;
          height: 16px;
          font-family: Roboto, Roboto;
          font-weight: 400;
          font-size: 12px;
          color: #9CA3AF;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }

    .card-body {
      margin-bottom: 1rem;

      .title {
        width: 240px;
        height: 24px;
        font-family: Roboto, Roboto;
        font-weight: 500;
        font-size: 16px;
        color: #000000;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 0.5rem;
      }

      .comtent {
        width: 308px;
        font-weight: 400;
        font-size: 14px;
        color: #4B5563;
        line-height: 20px;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 60px;
        min-height: 60px;
      }

    }
.card-footer {
  display: flex;

  .footer-item {
    flex: 1; // 关键属性，三等分
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0;
    flex-direction: column;


    // 统一图标尺寸（可选）
    .el-icon,
    .iconfont {
      font-size: 18px;
      color: #8B5CF6;

    }
    p {
      font-weight: 400;
      font-size: 14px;
      color: #9CA3AF;
      line-height: 20px;
    }
  }

  // 单独颜色设置
  .like {
    color: #8B5CF6;
  }
}
  }
}
</style>